<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div class="head">
                    <div class="headleft">
                        <div style="width:120px">
                            <span>项目名称：</span>
                        </div>
                        <el-input v-model="input" placeholder="请输入姓名" />
                        <div class="head1">
                            <el-button type="primary">查询</el-button>
                        </div>
                    </div>
                    <div class="headright">
                        <el-button type="primary" @click="dialogVisible = true">新增</el-button>
                    </div>
                </div>
            </el-header>
            <!-- 表格 -->
            <el-main>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column label="序号" width="180">
                        <template #default="scope">
                            <div style="display: flex; align-items: center">
                                <span style="margin-left: 10px">{{ scope.row.id }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="项目名称" width="180">
                        <template #default="scope">
                            <el-popover effect="light" trigger="hover" placement="top" width="auto">
                                <template #reference>
                                    {{ scope.row.item_name }}
                                </template>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="项目类别" width="180">
                        <template #default="scope">
                            <el-popover effect="light" trigger="hover" placement="top" width="auto">
                                <template #reference>
                                    {{ scope.row.item_type }}

                                </template>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="项目单价" width="180">
                        <template #default="scope">
                            <el-popover effect="light" trigger="hover" placement="top" width="auto">
                                <template #reference>
                                    {{ scope.row.item_price }}

                                </template>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="项目成本" width="180">
                        <template #default="scope">
                            <el-popover effect="light" trigger="hover" placement="top" width="auto">
                                <template #reference>
                                    {{ scope.row.item_cost }}
                                </template>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button size="small" @click="dialogVisible1 = true">编辑</el-button>
                            <el-button size="small" type="danger"
                            @click="open">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 新增弹窗 -->
                <el-dialog v-model="dialogVisible" title="添加检查项目" width="300px" draggable>
                    <div class="add">
                        <div>
                            <span>项目名称：</span>
                            <el-input v-model="input" />
                        </div>
                        <div>
                            <span>项目类别：</span>
                            <el-select v-model="value" class="m-2" placeholder="请选择项目类型">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </div>
                        <div>
                            <span>项目单机：</span>
                            <el-input v-model="input" />
                        </div>
                        <div>
                            <span>项目成本：</span>
                            <el-input v-model="input" />
                        </div>
                        <div>
                            <span>项目单位：</span>
                            <el-input v-model="input" />
                        </div>
                    </div>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button type="primary" @click="dialogVisible = false">
                                保存
                            </el-button>
                        </span>
                    </template>
                </el-dialog>

                <!-- 编辑弹窗 -->
                <el-dialog v-model="dialogVisible1" title="编辑检查项目" width="300px" draggable>
                    <div class="add">
                        <div>
                            <span>项目名称：</span>
                            <el-input v-model="input" />
                        </div>
                        <div>
                            <span>项目类别：</span>
                            <el-select v-model="value" class="m-2" placeholder="请选择项目类型">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </div>
                        <div>
                            <span>项目单机：</span>
                            <el-input v-model="input" />
                        </div>
                        <div>
                            <span>项目成本：</span>
                            <el-input v-model="input" />
                        </div>
                        <div>
                            <span>项目单位：</span>
                            <el-input v-model="input" />
                        </div>
                    </div>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button type="primary" @click="dialogVisible = false">
                                保存
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
            </el-main>
        </el-container>
</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const input = ref('')
const tableData= [
    {
        id: '1',
        item_name: '拍片片',
        item_type: "拍片类",
        item_price: 999.00,
        item_cost: 200.00,
    },
    {
        id: '2',
        item_name: 10,
        item_type: "外科",
        item_price: "张三",
        item_cost: "李四",
    },
    {
        id: '3',
        item_name: 10,
        item_type: "外科",
        item_price: "张三",
        item_cost: "李四",
    },
    {
        id: '4',
        item_name: 10,
        item_type: "外科",
        item_price: "张三",
        item_cost: "李四",
    },
]
const dialogVisible = ref(false)
const dialogVisible1 = ref(false)

const options = [
    {
        value: 'Option1',
        label: '请选择项目类型',
    },
    {
        value: 'Option2',
        label: '测绘会',
    },
    {
        value: 'Option3',
        label: '测绘',
    },
    {
        value: 'Option4',
        label: '排片类',
    },
    {
        value: 'Option5',
        label: '化验类',
    },
]
// 删除
const open = () => {
  ElMessageBox.confirm(
    'proxy will permanently delete the file. Continue?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
</script>

<style>
body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #676a6d;
    background-color: #f3f5f8;
}

.head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "sans-serif";
    color: #676a6d;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
    width: 1100px;

}

.headleft {
    padding-left: 10px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.head1 {
    margin-left: 10px;
}

.headright {
    padding-right: 10px;
}

.add {
    font-family: "sans-serif";
    color: #676a6d;
    width: 280px;
}

.el-input {
    width: 210px;
    height: 34px;
}
</style>